<template>
  <div class="person">
    <h2>当前的和是{{ sum }}</h2>
    <button @click="addSum()">sum + 1</button>
  </div>
</template>

<script setup name="Person">
import { watch, ref } from "vue";

let sum = ref(0);

function addSum() {
  sum.value += 1;
}
//监视
//watch(谁？,回调函数)
watch(sum, (newValue, oldValue) => {
  //console.log(sum.value)
  console.log(newValue, oldValue);
});
</script>

<style scoped>
.person {
  background-color: #c2e0f6;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin: 0 5px;
}
</style>